<template>
	<view class="address-form">
		<u--form :model="address"  ref="addressForm">
			<u-form-item :labelWidth="100" label="收货人姓名" prop="name">
				<u-input v-model="address.name" placeholder="请输入姓名" />
			</u-form-item>

			<u-form-item :labelWidth="100" label="联系电话" prop="phone">
				<u-input v-model="address.phone" placeholder="请输入联系电话" />
			</u-form-item>

			<u-form-item :labelWidth="100" label="省市区" prop="region">
				<u-picker :show="showPicker" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"
					@close="showPicker = false"></u-picker>
				<u-button type="primary" @click="showPicker = true">选择省市区</u-button>
				{{address.provinceName}}
			</u-form-item>

			<u-form-item :labelWidth="100" label="详细地址" prop="site">
				<u-input v-model="address.site" placeholder="请输入详细地址" />
			</u-form-item>

			<u-form-item :labelWidth="100" label="地址标签" prop="tag">
				<view class="radio-group">
					<u-radio-group v-model="address.tag" placement="row" @change="groupChange">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.name" @change="radioChange">
						</u-radio>
					</u-radio-group>
				</view>
			</u-form-item>

			<u-form-item :labelWidth="100" label="设为默认地址" prop="is_default">
				<u-switch v-model="address.is_default" label="设为默认地址" />
			</u-form-item>

			<u-button type="primary" @tap="saveAddress">保存</u-button>
		</u--form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				radiolist1: [{
						name: '默认',
						disabled: false
					},
					{
						name: '家',
						disabled: false
					},
					{
						name: '公司',
						disabled: false
					},
					{
						name: '学校',
						disabled: false
					}
				],
				radiovalue1: '默认', // 初始化默认选中值
				address: {
					id:0,
					name: '1',
					phone: '1',
					province_name: '1',
					city_name: '1',
					area_name: '1',
					site: '1',
					tag: '默认', // 初始化标签
					is_default: false
				},
				columns: [],
				showPicker: false,
				// rules: {
				// 	name: {
				// 		required: true,
				// 		message: '请输入姓名',
				// 		trigger: 'blur'
				// 	},
				// 	phone: {
				// 		required: true,
				// 		message: '请输入联系电话',
				// 		trigger: 'blur'
				// 	},
				// 	site: {
				// 		required: true,
				// 		message: '请输入详细地址',
				// 		trigger: 'blur'
				// 	}
				// },
				regions: [] // 省市区数据
			};
		},
		mounted() {
			// 省市区数据示例
			this.regions = [{
					province: '广东省',
					cities: [{
							city: '深圳市',
							areas: ['福田区', '罗湖区', '南山区', '宝安区']
						},
						{
							city: '广州市',
							areas: ['天河区', '白云区', '越秀区', '海珠区']
						}
					]
				},
				{
					province: '江苏省',
					cities: [{
							city: '南京市',
							areas: ['玄武区', '秦淮区', '建邺区', '鼓楼区']
						},
						{
							city: '苏州市',
							areas: ['姑苏区', '相城区', '吴中区', '工业园区']
						}
					]
				}
			];

			// 初始化省市区联动数据
			this.initPickerColumns();
		},
		onLoad(options) {
			this.id = options.id;
			this.detailAddress(this.id)
		},
		methods: {
			async detailAddress(id) {
				// alert(id)
				let that = this
				let requestData = {}
				let response = await this.$api.detailAddress({
					id: id
				})
				this.address = response.data
			},
			async editAddress(id) {
				let that = this
				let requestData = {}
				let response = await this.$api.editAddress(this.address
				)
				// this.address = response.data
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			initPickerColumns() {
				const provinces = this.regions.map(region => region.province);
				const cities = this.regions[0].cities.map(city => city.city);
				const areas = this.regions[0].cities[0].areas;

				this.columns = [provinces, cities, areas];
			},
			changeHandler() {
				// 当选择改变时，可以在这里处理逻辑
			},
			confirm(selected) {
				const provinceIndex = selected[indexs][0];
				const cityIndex = selected[indexs][1];
				const areaIndex = selected[indexs][2];
				console.log(provinceIndex)
				this.address.provinceName = this.columns[0][provinceIndex];
				this.address.cityName = this.columns[1][cityIndex];
				this.address.areaName = this.columns[2][areaIndex];
				console.log(this.columns.provinceName)
				this.showPicker = false; // 关闭选择器
			},
			async addAddress() {
				console.log(this.address)
				let response = await this.$api.addAddress(this.address);
				console.log(response.data)
				uni.redirectTo({
					url: '/pages/address/AddressList'
				})
			},
			saveAddress() {
				let that = this;
				// this.$refs.addressForm.validate((valid) => {

				// console.log(valid)

				// if (!valid) {
				// 	return;
				// }

				if (this.id) {
					this.editAddress(this.id);
				} else {
					this.addAddress();
				}


				// 处理保存逻辑
				console.log('地址信息:', this.address);
				// 	uni.showToast({
				// 		title: '地址保存成功',
				// 		icon: 'success'
				// 	});
				// 	uni.navigateBack(); // 返回上一页

				// });
			}
		}
	};
</script>

<style scoped>
	.address-form {
		padding: 10px;
	}

	.radio-group {
		display: flex;
		flex-direction: column;
	}
</style>